{% extends "../../base.html" %}

{% block crumbs %}
<div class="row">
    <div class="col-md-12">
        <ol class="breadcrumb"> 
            <li class="active">
                <a class="this">Project</a>
            </li>
            <li class="active">
                <a class="this-page" href="/atp4p/scene/">Test scenario</a>
            </li>
            <li class="active">
                <a class="">Add Scenario</a>
            </li>
        </ol>

    </div>
</div>
{% endblock %}

{% block body %}

<style>
	.form-group{
		display: flex;
	}
	.control-label{
		text-align: right;
	}
</style>

<div class="row">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Add Scenario</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" method="post" id="form_save">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Project name</label>
                        <div class="col-sm-6">
                            <input type="text" name="project" class="form-control" onkeyup="value=value.replace(/[^0-9a-zA-Z-_.]/g,'')" placeholder="English letters or numbers or -_. and project must exist">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Scenario name</label>
                        <div class="col-sm-6">
                            <select name="scene_type" class="form-control">
                                <option value="single">single</option>
                                <option value="mixed">mixed</option>
                                <option value="stability">stability</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Transaction name</label>
                        <div class="col-sm-6">
                            <input type="text" name="trans_name" class="form-control" onkeyup="value=value.replace(/[^0-9a-zA-Z-_.]/g,'')" placeholder="English letters or numbers or -_.">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Duration</label>
                        <div class="col-sm-6">
                            <input type="number" name="duration" class="form-control" placeholder="Unit (s)" value="1200">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Thread gradient</label>
                        <div class="col-sm-6">
                            <input type="text" name="threads" class="form-control" placeholder="Format like: 1,10,20,30">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Failure threshold</label>
                        <div class="col-sm-6">
                            <input type="text" name="threshold" class="form-control" placeholder="0.01表示0.01%" value="0.01">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Custom parameters</label>
                        <div class="col-sm-6">
                            <input type="text" name="params" class="form-control" placeholder="Format like: ip=127.0.0.1 port=8000">
                        </div>
                    </div>
                    <div align="center">
                    	<input type="button" name="Submit" class="btn btn-primary" onclick="javascript:history.back(-1);" value="Back">
                        <button type="button" class="btn btn-primary" onclick="save()">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock%}

{% block javascript %}
<script>
    function save() {
    	var data = $("#form_save").serialize();
    	$.ajax({
			type: 'POST',
			url: "/atp4p/scene/add/",
			data: data,
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
			success: function(res){
				var code = res.code;
				if(code == 0){
					alert("Created successfully!")
				}else{
					alert("Failed to create!"+res.msg)
				}
			},
			error: function(res){
				alert("Failed to create!")
			}
		});
    };
 </script>
{% endblock %}